import React, { Component } from 'react';
import Totaldata from "../../data/totalData.json"
import headBack from "./images/headBack.jpg"
import "./SearchCenter.scss"
class searchCenter extends Component {
  state = {
    seek: "",//存放文本框输入内容
    matchArr: [],//存放匹配成功的数据
    historySearch: [],//存放搜索历史
    timerId: null,
  }
  // 受控表单
  handleChangeValue = (e) => {
    this.setState({
      seek: e.currentTarget.value
    })

  }

  inputhandle = (keywords) => {
    // console.log(keywords);
    var arr = [];
    Totaldata.forEach(v => {
      var a = 0
      for (let i = 0; i < keywords.length; i++) {
        if (v.name.trim().indexOf(`${keywords[i]}`) >= 0) {
          a++
          if (a === keywords.length) {
            arr.push(v)
          }
        }
      }
    })
    if (arr !== []) {
      this.setState({
        matchArr: arr
      }, () => {
        // console.log(this.state.matchArr);
      })
    }
  }
  debounce = (fn, delay = 500) => {
    //期间间隔执行 节流
    return (...rest) => { //箭头函数是没有arguments的 所以用...rest 来代替
      let args = rest;
      if (this.state.timerId) clearTimeout(this.state.timerId);//要用this.timerId 而不能直接定义var timerId=null;
      this.state.timerId = setTimeout(() => {
        fn.apply(this, args)
      }, delay)
    }

  }


  onDebounceKeyUpClick = (e) => {
    let debounceinput = this.debounce(this.inputhandle, 500)
    debounceinput(e.target.value)
  }
  // 搜索按钮点击事件
  search = () => {
    // 根据数据内容长度形成匹配数组
    // console.log(this.state.seek.length);
    // console.log(Totaldata[0].name.trim()[1]);
    // console.log(Totaldata[0].name.trim().length);
    // var arr = [];
    // Totaldata.forEach(v => {
    //     var a = 0
    //     for (let i = 0; i < this.state.seek.length; i++) {
    //         if (v.name.trim().indexOf(`${this.state.seek[i]}`) >= 0) {
    //             a++
    //             if (a === this.state.seek.length) {
    //                 arr.push(v)
    //             }
    //         }
    //     }
    // })
    // if (arr !== []) {
    //     this.setState({
    //         matchArr: arr
    //     }, () => {
    //         console.log(this.state.matchArr);
    //     })
    // }
  }
  // 点击搜索结果的图片进行跳转
  goDetail = (e) => {
    console.log(e.target);
    console.log(e.target.getAttribute("goodsid"));
    var goods_id = e.target.getAttribute("goodsid");
    var goods_cid = 0;
    Totaldata.forEach(v => {
      if (v.id === goods_id) {
        goods_cid = v.cid;
      }
    })
    this.props.history.push("/goodsDetail/" + goods_cid + "/" + goods_id);
  }
  render () {
    return (
      <div className="searchCenter">
        {/* 头部导航开始 */}
        <div className="categoryTop">
          <img src={headBack} alt="返回" onClick={() => window.history.go(-1)} />
          <p className="title">选酒</p>
          <p className="lie"></p>
        </div>
        {/* 头部导航结束 */}
        {/* 搜索框开始 */}
        <div className="search">
          <div className="inp">
            <em></em>
            <input type="text" placeholder="整箱团购惠 加19.9的双支皮盒" value={this.state.inpVal} onChange={this.handleChangeValue} onInput={this.inputhandle} onKeyUp={this.onDebounceKeyUpClick} />
          </div>
          <div onClick={this.search}>搜索</div>
        </div>
        {/* 搜索框结束 */}

        {/* 搜索结果显示 */}
        <div className={this.state.matchArr.length === 0 ? " hiddenContent" : "searchRes"}>
          {
            this.state.matchArr.map((v, i) => {
              return (
                // 单条数据
                <div className="searchRes_item" onClick={this.goDetail} key={i} >
                  <div className="searchRes_item_pic">
                    <img src={v.imgList} alt="" goodsid={v.id} />
                  </div>
                  <div className="search_item_title" goodsid={v.id}>
                    {v.name}
                  </div>
                </div>
                // 单条数据\\

              )
            })

          }
        </div>
        {/* 搜索结果显示\\ */}

        {/* 热门搜索开始 */}
        <div className={this.state.matchArr == 0 ? " hotSearch" : "hotSearch hiddenContent"}>
          <div className="title">
            <em></em>
            <div className="hot">热门搜索</div>
          </div>
          <div className="hotItems">国台</div>
          <div className="hotItems">茅台</div>
          <div className="hotItems">酒鬼酒</div>
          <div className="hotItems">五粮液</div>
          <div className="hotItems">剑南春</div>
          <div className="hotItems">泸州老窖</div>
          <div className="hotItems">汾酒</div>
          <div className="hotItems">洋河</div>
          <div className="hotItems">水井坊</div>
          <div className="hotItems">古井贡</div>
          <div className="hotItems">郎酒</div>
          <div className="hotItems">西凤</div>
          <div className="hotItems">董酒</div>
          <div className="hotItems">茉莉花</div>
          <div className="hotItems">奔富</div>
          <div className="hotItems">马爹利</div>
          <div className="hotItems">拉菲</div>
          <div className="hotItems">人头马</div>
          <div className="hotItems">黄尾袋鼠</div>
          <div className="hotItems">丁戈树</div>
          <div className="hotItems">美人鱼</div>
          <div className="hotItems">克拉克</div>
        </div>
        {/* 热门搜索结束 */}
        {/* 最近搜索开始 */}
        <div className={this.state.matchArr.length == 0 ? " history" : "history hiddenContent"}>
          <div className="historyTit">
            <div className="left">
              <em></em><span>最近搜索</span>
            </div>
            <div className="clear"></div>
          </div>
          <div className="historyItem">美人鱼</div>
        </div>
        {/* 最近搜索结束 */}
      </div>
    )
  }
}

export default searchCenter;